<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <script type="text/javascript" src="js/common.js"></script>
    <script type="text/javascript" src="js/location-sample.js"></script>
    <script src="js/OpenLayers.js"></script>
    <script src="js/OpenStreetMap.js"></script>
     <script type="text/javascript">
        // Start position for the map (hardcoded here for simplicity,
        // but maybe you want to get from URL params)
        // (Though to get it from the URL it's simpler to use the Permalink and ArgParser controls)
        var lat=51.508;
        var lon=-0.118;
        var zoom=13;
 
        var map; //complex object of type OpenLayers.Map
 
        //Initialise the 'map' object
        function mapinit() {
            map = new OpenLayers.Map ("map", {
                controls:[
                    new OpenLayers.Control.Navigation(),
                    new OpenLayers.Control.PanZoomBar(),
                    new OpenLayers.Control.Attribution()],
                maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
                maxResolution: 156543.0399,
                numZoomLevels: 19,
                units: 'm',
                projection: new OpenLayers.Projection("EPSG:900913"),
                displayProjection: new OpenLayers.Projection("EPSG:4326")
            } );
 
 
            // Define the map layer
            // Note that we use a predefined layer that will be
            // kept up to date with URL changes
            // Here we define just one layer, but providing a choice
            // of several layers is also quite simple
            // Other defined layers are OpenLayers.Layer.OSM.Mapnik, OpenLayers.Layer.OSM.Maplint and OpenLayers.Layer.OSM.CycleMap

            layerTilesAtHome = new OpenLayers.Layer.OSM.Osmarender("Osmarender");
            map.addLayer(layerTilesAtHome);
 
            if( ! map.getCenter() ){
                var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
                map.setCenter (lonLat, zoom);
            }
            

        }
 
    </script>
 
  </head>
  <body id='docBody' bgcolor="#ffffff" onload="setup(); setTimeout('mapinit()',500);" style=width:100%;height:100%;>
<!--
    <form name="frm">
    	<h3>Location API Sample Widget</h3>
     	
  		<input type="button" onclick="getLocation('img1')" value="GetLocation"><img id="img1" src="pic/blank.png" width="25" height="25" align="center"><br>
  		<input type="button" onclick="getLocationAsync('img2')" value="GetLocationAsync"><img id="img2" src="pic/blank.png" width="25" height="25" align="center"><br>
      <input type="button" onclick="traceLocation('img3')" value="Trace"><img id="img3" src="pic/blank.png" width="25" height="25" align="center"><br>
  		<input type="button" onclick="cancelNotification('img4')" value="CancelNotification"><img id="img4" src="pic/blank.png" width="25" height="25" align="center"><br>
      <input type="button" onclick="calculateLocation('img5')" value="Calculate"><img id="img5" src="pic/blank.png" width="25" height="25" align="center"><br>

			<hr>
      <div class='locationsample' id='locationsample' bgcolor="#ddeeff" style=width:100%;height:30px; overflow:auto>
      </div>

    </form>-->
      <div style="width:100%; height:100%" id="map"></div>
  </body>
</html>